<template>
  <div>
    <!-- subnav -->
    <div class="subnav">
      <ul class="navbar">
        <li>
          <a
            data-act="subnav-click"
            data-val="{subnavClick:1}"
            data-state-val="{subnavId:1}"
            class="active"
            href="javascript:void(0);"
            >正在热映</a
          >
        </li>
        <li>
          <a
            data-act="subnav-click"
            data-val="{subnavClick:2}"
            href="?showType=2"
            >即将上映</a
          >
        </li>
        <li>
          <a
            data-act="subnav-click"
            data-val="{subnavClick:3}"
            href="?showType=3"
            >经典影片</a
          >
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "subnav"
};
</script>
<style scoped>
/* subnav */
.subnav {
  background-color: #47464a;
  height: 60px;
  width: 100%;
  min-width: 1200px;
  text-align: center;
}
.subnav .navbar {
  display: inline-block;
  overflow: hidden;
}
.subnav .navbar li {
  display: inline-block;
  float: left;
}
.subnav .navbar li .active {
  color: #ef4238;
  position: relative;
  cursor: default;
  background-color: #47464a;
}
.subnav .navbar li a {
  display: block;
  font-size: 16px;
  color: #999;
  height: 60px;
  line-height: 60px;
  padding: 0 40px;
}
.subnav .navbar li .active::before {
  content: "";
  width: 2px;
  height: 0;
  display: inline-block;
  position: absolute;
  left: 50%;
  margin-left: -5px;
  top: 53px;
  border-bottom: 7px solid #fff;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
}
</style>
